<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width:200px;
				height:300px;
				border:1px solid red;
			}
			#div2{
				width:200px;
				height:100px;
				background: blue;
			}
			#div1{
				width:200px;
				height:100px;
				background: red;
			}
		</style>
		<script>
			window.onload = function(){
				var oBox = document.getElementById("box");
				var oDiv2 = oBox.children[0];
				
//				创建一个新的div
				var oDiv1 = document.createElement('div');
				oDiv1.setAttribute('id','div1');
				oDiv1.innerHTML = 'div1';
//				父元素                       新元素     要加到谁前面
//				oBox.insertBefore(oDiv1,oDiv2);
			}
		</script>
	</head>
	<body>
		<div id="box">
			
			<div id="div2">div2</div>
			
		</div>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	</body>
</html>
